<template>
<div class="mould_241" style="padding-bottom: 9.54667px; background: rgb(243, 244, 245);">
    <div class="pad10">
    <div class="type241" style="margin-bottom: 20px; background-color: rgb(243, 244, 245);">
        <div class="Box241 pl10 pt10 pb10 pr5 bg">
            <div class="pb10">
                <img src="@/assets/img/new1.png" style="height:0.2rem;">
            </div>
            <a class="BoxImg241 db">
                <img src="@/assets/img/new2.png" class="w100 pr5">
            </a>
            
            
                <van-tabs  v-model="active" color="white" background="transparent" line-width="20px" title-inactive-color="#ffffff" title-active-color="#ffffff">
                
                <van-tab title="超值1元抢" >
                    <div class="flex flex-wrap flex-pj pt10 box-wrap" >
                        <a class="list241 it1" v-for="(item,index) in imgList1" :key="index-1">
                    <div class="bgfff round5"  >
                        
                        <div class="img140">
                            <img :src="item.photo" width="90%" class="db ct pt5">
                        </div>
                        <div class="rela">
                            <div class="ft10 ftc10 ell w100">{{item.subject}}</div>
                            <div class="cf0 pl5 pb5 flex flex-ac">
                                <div class="it1 cf0">
                                    <span class="ft10 dib">￥</span>
                                    <span class="ft14 bold" style="margin-left: -7px;">1.</span>
                                    <span class="ft10" style="margin-left: -5px;">00</span>
                                    <span class="c999 ft10 dib" style="margin-left: -5px;">/件</span>
                                </div>
                                <img :src="item.icon" width="20px" class="abs" style="right: 0px; bottom: 7px;">
                            </div>
                        </div>
                        
                    </div>
                    </a>
                    </div>
                </van-tab>
                <van-tab title="好货9.9抢">
                    <div class="flex flex-wrap flex-pj pt10 box-wrap" >
                        <a class="list241 it1" v-for="(item,index) in imgList2" :key="index-2">
                    <div class="bgfff round5"  >
                        
                        <div class="img140">
                            <img :src="item.photo" width="90%" class="db ct pt5">
                        </div>
                        <div class="rela">
                            <div class="ft10 ftc10 ell w100">{{item.show_title}}</div>
                            <div class="cf0 pl5 pb5 flex flex-ac">
                                <div class="it1 cf0">
                                    <span class="ft10 dib">￥</span>
                                    <span class="ft14 bold" style="margin-left: -7px;">1.</span>
                                    <span class="ft10" style="margin-left: -5px;">00</span>
                                    <span class="c999 ft10 dib" style="margin-left: -5px;">/件</span>
                                </div>
                                <img :src="item.icon" width="20px" class="abs" style="right: 0px; bottom: 7px;">
                            </div>
                        </div>
                        
                    </div>
                    </a>
                    </div>
                </van-tab>
                <van-tab title="爆款好价选">
                    <div class="flex flex-wrap flex-pj pt10 box-wrap" >
                        <a class="list241 it1" v-for="(item,index) in imgList3" :key="index-3">
                    <div class="bgfff round5"  >
                        
                        <div class="img140">
                            <img :src="item.photo" width="90%" class="db ct pt5">
                        </div>
                        <div class="rela">
                            <div class="ft10 ftc10 ell w100">{{item.show_title}}</div>
                            <div class="cf0 pl5 pb5 flex flex-ac">
                                <div class="it1 cf0">
                                    <span class="ft10 dib">￥</span>
                                    <span class="ft14 bold" style="margin-left: -7px;">1.</span>
                                    <span class="ft10" style="margin-left: -5px;">00</span>
                                    <span class="c999 ft10 dib" style="margin-left: -5px;">/件</span>
                                </div>
                                <img :src="item.icon" width="20px" class="abs" style="right: 0px; bottom: 7px;">
                            </div>
                        </div>
                        
                    </div>
                    </a>
                    </div>
                </van-tab>
                </van-tabs>
                <a  >
                    
                </a>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data() {
    return {
      imgList1: [],
      imgList2: [],
      imgList3: [],
      active: 0,
    };
  },
   async mounted() {
    let result = await this.$http.get({
      url: "/index/main.html",
      params: {
        do: "getStaticV415",
        cdn_version: "202101181614021",
        pet_type: "dog",
        version: "550",
        is_single: "0",
        isWeb: 1,
        system: "wap",
        distinct_id:
          "1768a295992703-0f83f11c740bf1-230346d-1327104-1768a29599362d",
        debug_param: "",
      },
    });
    this.imgList1 = result.datas.list[3].categoryList[0].goodsList;
    this.imgList2 = result.datas.list[3].categoryList[1].goodsList;
    this.imgList3 = result.datas.list[3].categoryList[2].goodsList;
     console.log(result.datas.list);
    
  },
}
</script>
<style lang="stylus" scoped>
.Box241{
    background-size: 100% 100%;
    width 100%
}
.pl10 {
    padding-left: 10px;
}
.pb10 {
    padding-bottom: 10px;
}
.pr5 {
    padding-right: 5px;
}
.pt10 {
    padding-top: 10px;
}
.bg
    background-image: url("https://static.epetbar.com/mini_images/emall/bground241.png");
.pb10 {
    padding-bottom: 10px;
}
.pad10 {
    padding: 10px;
}
.db {
    display: block;
}
.flex
    display flex
.mt5 {
    margin-top: 5px;
}
.flex-pj {
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.flex-wrap {
    flex-wrap: wrap;
}
.pt10 {
    padding-top: 10px;
}
.pr5 {
    padding-right: 5px;
}
.w100 {
    width: 100%;
}
.rela{
    position relative
}
.nav241-active {
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px;
}
.nav241 {
    padding: 0 20px;
}
.afff, .cfff {
    color: #fff;
}
.ft12 {
    font-size: 12px;
}
.list241 {
    padding-right: 5px;
}
.it1, .it2 {
    display: block;
    min-width: 0;
}
.it1 {
    -webkit-box-flex: 1;
    flex: 1;
}
.round5 {
    border-radius: 5px;
}
.bgfff {
    background: #fff;
}
.pt5 {
    padding-top: 5px;
}
.ct {
    margin: auto;
}
.ftc10 {
    -webkit-transform-origin-x: center;
}
.el2, .ell {
    overflow: hidden;
}
.ell {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ft10 
    font-size: 12px;
.flex-ac {
    -webkit-box-align: center;
    align-items: center;
}
.cf0 {
    color: #ff5757;
}
.pl5 {
    padding-left: 5px;
}
.pb5 {
    padding-bottom: 5px;
}
.dib {
    display: inline-block;
}
.ft10 {
    font-size: 12px;
    -webkit-transform-origin-x: 0;
    
}
.ft14 {
    font-size: 14px;
}
.bold {
    font-weight: 700;
}
.c999 {
    color: #999;
}
.dib {
    display: inline-block;
}
.abs {
    position: absolute;
}
</style>